<!DOCTYPE html>
<html>
<head>
    <title>NGINX file upload</title>
    <style type="text/css">
    .container{
       margin: 0 auto;
       border: 0px solid black;
       width: 50%;
       height: 250px;
       border-radius: 3px;
       background-color: ghostwhite;
       text-align: center;
    }
    .button{
       border: 0px;
       background-color: deepskyblue;
       color: white;
       padding: 5px 15px;
       margin-left: 10px;
    }
    </style>
    <script type="text/javascript">
        function upload(e) {
            var file = document.getElementById('file').files[0];

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/upload",true);

            xhr.setRequestHeader("Content-Type", "text/plain");
            xhr.setRequestHeader("Content-Disposition", "attachment, filename=\"" + file.name + "\"");
            xhr.setRequestHeader("X-Session-ID", file.name);

            xhr.onload=function(e) {
                alert("Upload success!");
                document.getElementById("uploadForm").reset();
                document.getElementById("fileList").contentWindow.location.reload(true);
            }

            xhr.send(file);
        }
    </script>
</head>
<body>
    <div class="container">
        <h2>Select file to upload</h2>
        <form id="uploadForm" method="POST" enctype="multipart/form-data" action="">
            <input type="file" id="file" name="file">
            <input type="button" class="button" value="Upload" id="but_upload" onclick="upload()">
        </form>
        <br/>
        <iframe id="fileList" src="/download" height=400 width=800 frameborder=0/>
    </div>
</body>
</html>